<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'jquery_city.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
  <script type="text/javascript">
    $(function(){
       var my_data;
       $.get("Area.xml",function(data){
           my_data =data;
           var $pro=$(data).find("province");
           $pro.each(function(){
             var $proName =$(this).attr("name");
             var $proVal = $(this).attr("value");
             $("#province").append("<option value='"+$proVal+"'>"+$proName+"</option>");
             });
           });
           $("#province").change(function(){
             //加载数据前进行清空
             var $selVal = $(this).val();
             //获取province节点中value=11000的city节点
             var $city = $(my_data).find("province[value='"+$selVal+"'] city");
               //加载数据前进行清空
               $("#city option:not(:first)").remove();
             $city.each(function(){
               var $cityName=$(this).attr("name");
               var $cityVal =$(this).attr("value");
               $("#city").append("<option value='"+$cityVal+"'>"+$cityName+"</option>");
             });
           });
           $("#city").change(function(){
           
             $("#country option:not(:first)").remove();
             $(my_data).find("city[value='"+$(this).val()+"'] country").each(function(){
              $("#country").append("<option value='"+$(this).attr("value")+"'>"+$(this).attr("name")+"</option>");
              });
           });
    });
  
  </script>
  </head>
  
  <body>
    <select id="province">
       <option>---请选择省份---</option>
    </select>
    --
    <select id="city">
      <option>----请选择城市---</option>
    </select>
    <select id="country">
      <option>----请选择城市---</option>
    </select>
  </body>
</html>
